<!-- 表单修改 -->

<template>
  <WebForm :disabled="!one.id" class="LabelGroup-FormEdit">
    <div class="auto">
      <div class="flexCC flexCol" :style="{ backgroundColor: one.backgroundColor }">
        <div>{{ nameTop || '-' }}</div>
        <div v-if="nameBottom">{{ nameBottom }}</div>
      </div>
    </div>

    <div class="auto">
      <EasyRow col4>
        <FormInput label="分组名称" bind="labelGroupName" :max="4" required />
        <FormInput label="分组编码" bind="labelGroupCode" disabled />
        <FormTree label="上级分组" bind="parentId, parentName, parentCode" :dict="treeDict" disabled />
        <FormSelect label="标签类型" bind="typeValue, typeLabel" :dict="DICT.TYPE" disabled />
      </EasyRow>

      <EasyRow col4>
        <FormNum label="排序" bind="sortNumber" :min="1" :max="999" initMin noTip required />
        <FormColor label="背景颜色" bind="backgroundColor" noClear auto required />
        <div
          v-for="item in MAP.BG_COLOR_LIST"
          :key="item"
          :style="{ backgroundColor: item }"
          class="inFlexCC"
          @click="one.backgroundColor = item"
        >
          <i v-if="item === one.backgroundColor" class="el-icon-check" />
        </div>
      </EasyRow>

      <FormTextarea label="分组描述" bind="description" :rows="2" :max="100" required />
    </div>

    <EditButton :noDel="!CORE.isEmpty(one.children)" />
  </WebForm>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'FormEdit',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixTree()],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('@admin/views/System/Dict/DictData/FormEdit', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 名称上一行
     */
    nameTop() {
      const { one: { labelGroupName: name } } = this
      return name.length < 3 ? name : name.slice(0, 2)
    },

    /**
     * 名称下一行
     */
    nameBottom() {
      const { one: { labelGroupName: name } } = this
      return name.length < 3 ? '' : name.slice(2)
    },
  },
}
</script>
